<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .right {
            height: 600px;
            background: red;
        }
    </style>
</head>

<body>
    <!-- 文字环绕 -->
    <div class="outer">
        <div class="left"></div>
        <div class="right">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora at dolores quisquam
            repellat aperiam, id ratione amet numquam dolorum error voluptate assumenda consectetur, vitae nihil iusto!
            Reiciendis veniam aut aperiam? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore veniam
            necessitatibus, deserunt distinctio officia facere? Praesentium dicta ad, aliquam distinctio eum, sapiente
            repellendus quidem et facilis corrupti molestias quas iusto? Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Assumenda laborum illum sed nam eligendi at id praesentium natus dolore perferendis, aut
            eos voluptatem ut ipsum dolores fugiat non delectus repudiandae. Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Nobis quod, ad optio, doloribus ullam illum magnam voluptatum laudantium aspernatur fugit
            labore, consequuntur qui nisi esse eum repellendus. Distinctio, non officia! Lorem ipsum dolor, sit amet
            consectetur adipisicing elit. Asperiores, neque! Ipsa dolore necessitatibus blanditiis iste tempora quod
            dolorum nobis corporis id amet, eaque vero sit aliquid in culpa recusandae enim? Lorem ipsum dolor, sit amet
            consectetur adipisicing elit. Libero, assumenda. Adipisci eaque et, error quaerat rem maiores, itaque iure
            quod at ea, vel eveniet. Magnam dolorum nam fugiat doloremque necessitatibus. Lorem ipsum dolor, sit amet
            consectetur adipisicing elit. Harum, ducimus. Pariatur, reiciendis. Dignissimos expedita nam excepturi dicta
            voluptatum, eum molestias saepe soluta asperiores. Modi, doloremque eos omnis cum sed iusto. Lorem ipsum
            dolor sit amet consectetur adipisicing elit. Quaerat doloremque obcaecati temporibus mollitia odit
            similique, impedit aliquam nihil, eos magnam aperiam, animi ea illum adipisci repellat esse aut! Eveniet,
            nobis!</div>
    </div>
</body>

</html>